<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('按钮节流')}`">{{ $t('按钮节流') }}</t>
            <li>现象：事件会采用防抖的方式处理，并且在首次触发事件时立即执行，之和会等待一定的时间（默认为 300 毫秒），如果在这段时间内没有再次触发事件，那么处理函数会被立即执行。如果在等待时间内又触发了事件，那么计时器会重新开始计时，直到等待时间结束并且没有新的事件触发时才执行处理函数</li>
            <p><span class="s-code">简而言之，当你重复快速点击，且时间间隔小于规定时间时，只有第一次点击有效</span></p>
        </template>
        <sib-throttle>
            <el-button type="primary" @click="handleClick">连续点击我</el-button>
        </sib-throttle>
    </example>
</template>

<script>
import { ElMessage } from 'element-plus';

export default {
    setup() {
        return {
            handleClick() {
                ElMessage.info('继续，不要停！');
            },
            templateString: `<template>
    <div class="example-box">
        <sib-throttle>
            <el-button type="primary" @click="handleClick">连续点击我</el-button>
        </sib-throttle>
    </div>
</template>

<script>
import { ElMessage } from 'element-plus';

export default {
    setup() {
        return {
            handleClick() {
                ElMessage.info('继续，不要停！');
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
